Micron Document
<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>Zoomable User Interface</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/Zoomable_User_Interface"> <link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Zoomable_User_Interface rootpage-Zoomable_User_Interface skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Zoomable User Interface</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p><b>Zoomable User Interface</b> (kurz <b>ZUI</b>) ist ein Begriff aus der <a href="Informatik" title="Informatik">Informatik</a> und beschreibt eine spezielle Art von <a href="Grafische_Benutzeroberfl%C3%A4che" title="Grafische Benutzeroberfläche">grafischer Benutzeroberfläche</a> (GUI), bei der Benutzer den Maßstab des angezeigten Bereichs ändern können, um mehr oder weniger Details zu sehen, und durch verschiedene Dokumente zu wechseln. Ein ZUI kann unterschiedliche Skalierungsgrade annehmen, die vom Benutzer gesteuert werden. Ein ZUI erfordert eine zusätzliche Eingabe vom Benutzer, um <a href="Zoom_(Film)" title="Zoom (Film)">Zoom</a> und <a href="Kameraschwenk" title="Kameraschwenk">Pan</a> zu kontrollieren.
</p>

<div class="mw-heading mw-heading2"><h2 id="Definition">Definition</h2></div>
<p>Benutzeroberflächen, die einen der folgenden Punkte erfüllen, gelten als ZUI.
</p>
<ul><li>Bedienelemente liegen auf einer Arbeitsfläche, die gezoomt und horizontal sowie vertikal verschoben werden kann (englisch Pan).</li>
<li>Mindestens ein Element enthält skalierbare Bestandteile.</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Geschichte">Geschichte</h2></div>
<p>Die Geschichte der ZUIs knüpft an die Geschichte des GUIs an. <a href="Ivan_Sutherland" title="Ivan Sutherland">Ivan Sutherland</a> entwickelte im Jahr 1963 am Massachusetts Institute of Technology (MIT) <a href="Sketchpad" title="Sketchpad">Sketchpad</a>, das heute als erstes GUI gilt und über eine Zoom-Funktion verfügte. Das sog. Fisheye Zooming wurde 1981 von George W. Furnas definiert und wird häufig in ZUIs eingesetzt. 1991 entwickelten David Fox und Ken Perlin Pad am <a href="Courant_Institute_of_Mathematical_Sciences_of_New_York_University" title="Courant Institute of Mathematical Sciences of New York University">Courant Institute of Mathematical Sciences</a> an der <a href="New_York_University" title="New York University">New York University</a>. Pad gilt als erstes ZUI. Mit Pad sowie der Weiterentwicklung Pad++ können multimediale Daten auf einer zweidimensionalen Ebene dargestellt werden. Pad nutzte bereits die Semantische Skalierung (siehe unten). Am Human-Computer Interaction Lab (HCIL) wurde Pad durch das Projekt Jazz fortgesetzt und nach Java portiert. Die jüngste ZUI-Bibliothek des HCIL ist Piccolo, die die Programmierung von ZUIs im Vergleich zu Jazz wesentlich vereinfachte. Piccolo ist für <a href="Java_(Programmiersprache)" title="Java (Programmiersprache)">Java</a> und <a href="C-Sharp" title="C-Sharp">C#</a> als <a href="Open_Source" title="Open Source">Open-Source</a>-Bibliothek verfügbar.
</p>
<div class="mw-heading mw-heading2"><h2 id="ZUI-Elemente">ZUI-Elemente</h2></div>
<p>ZUIs verfügen in der Regel über primitive Elemente, die zur Zusammenstellung von Bedienelementen genutzt werden können. Je nach Programmierbibliothek können diese Elemente wie in einer GUI-Bibliothek mit <a href="Eventhandler" class="mw-redirect" title="Eventhandler">Eventhandlern</a> für Maus- und Tastatureingaben versehen sowie animiert und transformiert werden.
</p>
<ul><li>Pfade: Diese können einfache Kanten, gefüllte Rechtecke, Polygone bis hin zu <a href="Bezierkurve" class="mw-redirect" title="Bezierkurve">Bezierkurven</a> darstellen.</li>
<li>Text</li>
<li><a href="Rastergrafik" title="Rastergrafik">Bitmap</a></li></ul>
<p>In einem ZUI können je nach Programmierbibliothek Elemente von GUIs verwendet werden. Das Piccolo Toolkit bietet beispielsweise <a href="Wrapper_(Software)" title="Wrapper (Software)">Wrapper</a> in der Programmiersprache <a href="C-Sharp" title="C-Sharp">C#</a> für Bedienelemente der Grafikschnittstelle <a href="Graphics_Device_Interface" title="Graphics Device Interface">GDI</a>.
</p>
<ul><li>Schaltfläche</li>
<li>Checkbox</li>
<li>Radiobutton</li></ul>
<p><i>Siehe auch</i>: <a href="Grafische_Benutzeroberfl%C3%A4che#GUI-Elemente" title="Grafische Benutzeroberfläche">GUI-Elemente</a>
</p>
<div class="mw-heading mw-heading2"><h2 id="Semantische_Skalierung">Semantische Skalierung</h2></div>
<p>Die <i>Semantische Skalierung</i> (englisch <i>Semantic Zooming</i>) ist eine Technik der ZUIs, Objekte abhängig zum Skalierungsgrad in unterschiedlichen Detailstufen darzustellen. Dies verschafft einen guten Gesamtüberblick über die Informationen, bei näherer Betrachtung ist ein Objekt jedoch sehr detailliert, d.&nbsp;h. Informationen werden je nach Skalierung ein- oder ausgeblendet. Programmierer nutzen diese Möglichkeit, um die <a href="Rechenleistung" title="Rechenleistung">Performance</a> ihrer Programme zu verbessern sowie eine bessere Übersicht zu schaffen.
</p>
<div class="mw-heading mw-heading2"><h2 id="Liste_von_ZUI-Bibliotheken">Liste von ZUI-Bibliotheken</h2></div>
<p>Viele ZUI-Programmierbibliotheken setzen verstärkt auf Graphen, durch die eine strukturierte Ansicht in <a href="Programmablaufplan" title="Programmablaufplan">Flowcharts</a> ermöglicht wird.
</p>
<ul><li>Piccolo Toolkit – A Structured 2D Graphics Framework – Programmierbibliothek für Java und C#. Piccolo ist unter der freien <a href="BSD-Lizenz" title="BSD-Lizenz">BSD-Lizenz</a> verfügbar.</li>
<li>Ziteboard ist ein geräteunabhängiges, webbasiertes Whiteboard mit Zoomfunktion und der Möglichkeit zur Kollaboration in Echtzeit, geschrieben in purem html5 und javascript.</li>
<li>Jazz Toolkit des Human Computer Interaction Labs der University of Maryland. Jazz ist ein Vorgänger des Piccolo Toolkits implementiert in Java. Die Weiterentwicklung wurde eingestellt, die Quellen sind jedoch weiterhin zugänglich.</li>
<li>ZVTM – Zoomable Visual Transformation Machine</li>
<li>Zomit – Java ZUI-Library</li></ul>
<div class="mw-heading mw-heading2"><h2 id="Literatur">Literatur</h2></div>
<ul><li>George W. Furnas; <i>The FISHEYE view: a new look at structured files</i>; Bell Laboratories Technical Memorandum #81-11221-9; 1981</li>
<li>George W. Furnas; <i>Generalized Fisheye Views</i>; CHI'86 p.16–24; 1986</li>
<li>Jef Raskin; <i>Das Intelligente Interface</i>; Addison-Wesley, München 2001, ISBN 3-8273-1796-7</li>
<li>Die ZUI-bezogene Literatur-Seite der Leute um Ben Shneiderman (z.&nbsp;B. Ben Bederson) <a rel="nofollow" class="external free" href="http://www.cs.umd.edu/hcil/piccolo/learn/publications.shtml">http://www.cs.umd.edu/hcil/piccolo/learn/publications.shtml</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<ul><li><a rel="nofollow" class="external text" href="http://eaglemode.sourceforge.net/">Eagle Mode</a> – Dateimanager oder auch Desktop für Linux-Systeme (auch Windows, MacOS, weitere)</li></ul></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-08-19" href="https://de.wikipedia.org/wiki/?title=Zoomable_User_Interface&amp;oldid=259001502">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>

</body></html>